<template>
  <div ref="list">
            <div class="main-r-t">
                <img :src="lists?lists[index].img:''" alt="">
            </div>
            <div class="main-r-jing" v-for="(typearrV,i) in lists[index].typearr" :key="i">
                <h1>{{typearrV.title}}</h1>
                <ul>
                    <li v-for="(typelistlongarrV,i) in typearrV.typelistlongarr" :key="i">
                        <img :src="typelistlongarrV.itemimg" >
                        <span>{{typelistlongarrV.itemtitle}}</span>
                        <p>{{typelistlongarrV.itemprice}}</p>
                    </li>
                    
                </ul>
            </div>
            <div class="more" >
              <ul>
                <li v-for="(typelistshortarrV,i) in lists[index].typelistshortarr" :key="i">
                  <img :src="typelistshortarrV.totoimg">
                  <span>{{typelistshortarrV.tototitle}}</span>
                </li>
              
              </ul>
            </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name:'List',
    props:['index'],
    computed:{
        ...mapState(["lists"])
    },
    mounted() {
        console.log(this.$refs.list.style);
        this.$refs.list.style.top=0+'px'
        console.log(this.$refs.list.offsetTop);

    },
}
</script>

<style scoped>

.main-r-jing h1{
    font-size: .145rem;
    margin-top: .2rem;
}
.main-r-jing ul li{
    width: 100%;
    height: .76rem;
    background-color: #f8f8f8;
    position: relative;
    padding:.005rem .1rem;
    border-radius: .05rem;
    margin-top: .1rem;
}
.main-r-jing ul li img{
    width: .69rem;
    height: .69rem;
    display: inline-block;
}
.main-r-jing ul li p{
    display: inline-block;
    position: absolute;
    top: .4rem;
}
.main-r-jing ul li span{
    position: absolute;
    top: .15rem;
}
.more ul{
  display: flex;
  flex-wrap: wrap;
}
.more ul li{
  width: .87rem;
  height: .805rem;
  font-size: .12rem;
  text-align: center;
  color: rgba(0,0,0,.54);
}
.more ul li img{
  width: .52rem;
  height: .52rem;
  margin-left: .2rem;
}
</style>